<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css"/>
		<title>复制到剪贴板</title>
		<style>
			body{background: #FFF;}
			.content{width: 100%; padding: 15px; box-sizing: border-box;}
			.clipboard-warp{width: 100%; font-size: 0; margin-top: 40px;}
			#text{width: -webkit-calc(100% - 80px); width: calc(100% - 80px); height: 50px; background: #F4F4F4; border-radius: 10px 0 0 10px; display: inline-block; vertical-align: middle;}
			#text:after{border-radius: 20px 0 0 20px;}
			#text input{width: 100%; height: 100%; font-size: 14px; padding: 0 15px; box-sizing: border-box; border: none; background: transparent; position: relative; z-index: 2;}			
			.copy-btn{width: 80px; height: 50px; margin: 0 0 0 0; text-align: center; background: var(--aui-blue); border-radius: 0px 10px 10px 0px; color: #FFF; display: inline-block; vertical-align: middle;}
			.copy-btn span{display: inline-block; margin: 0 0 0 5px; vertical-align: top;}
		</style>
	</head>
	<body>		
	    <div class="container" id="app">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title">复制到剪贴板</div>
			</header>
	    	<div class="content" v-cloak  style="padding: 15px 15px 0 15px;">				
	    		<div class="clipboard-warp">
					<div id="text" class="border">
						<input type="" name="" id="" v-model="text" placeholder="请输入文字内容" value="" />					
					</div>	
					<div class="aui-btn copy-btn" @click.stop="copy()"><i class="iconfont iconcopy"></i><span>复制</span></div>
				</div>
	    	</div>
	    </div>
		<script type="text/javascript" charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	    <script type="text/javascript" src="../../../lib/vue.min.js"></script>
	    <script type="text/javascript" src="../../../lib/jquery/jquery-2.1.3.min.js"></script>
	    <script type="text/javascript" src="../../../static/js/aui.min.js"></script>
	   	<script type="text/javascript">
	   		window.onload = function(){				
	   			apiready();
	   		}
	   		apiready = function() {
	   			var vm = new Vue({
	   				el: "#app",
	   				data: {	
						text: '',	   					
	   				},
	   				created: function(){
	   					var _this = this;
						
	   				},
	   				mounted: function() {
	   					var _this = this;	
	   					aui.touchDom(document.querySelector('.copy-btn'), "#FFF", "var(--aui-blue)", "1px solid var(--aui-blue)");	
	   	            },
	   	            updated: function () {
	   	                var _this = this;
	   	                _this.$nextTick(function () {
	   		
	   	                })
	   	            },
	   	            methods: {							   								
						//复制到剪贴板
						copy(){
							var _this = this;	
							if(!aui.isDefine(_this.text)){aui.toast({msg: '请输入文字内容'}); return;}
							aui.copy(_this.text);
							aui.toast({msg: '复制成功'});
						},
	   	            }
	   			});
	   		}
	   	</script>
	</body>
</html>
